<template>
  <div class="w-full pb-50px" id="content">
    <div
      class="flex justify-between items-center bg-white p-20px pb-15px border-b"
    >
      <div>选择店</div>
      <div class="flex items-center">
        <div class="flex items-center" @click="handleShop">
          <span class="mr-10px">{{ shopingName }}</span>
          <van-icon name="arrow" />
        </div>
        <div
          @click="getList"
          class="w-64px h-28px flex justify-center items-center bg-[#2E95FF] rounded-5px text-white ml-15px text-12px"
        >
          统计
        </div>
      </div>
    </div>
    <div class="flex justify-between items-center bg-white p-20px">
      <div>设置日期</div>
      <div class="flex items-center">
        <div
          @click="handleDate"
          class="flex items-center justify-center w-142px h-32px rounded-5px border"
        >
          <div><van-icon name="calendar-o" /></div>
          <div class="ml-5px">{{ date }}</div>
        </div>
        <div
          @click="handleClick"
          class="w-64px h-28px flex justify-center items-center bg-[#2E95FF] rounded-5px text-white ml-15px text-12px"
        >
          <a :href="url" target="_blank">下载报表</a>
        </div>
      </div>
    </div>

    <div class="flex items-center w-full bg-[#F0F7FF] h-44px justify-center">
      <div class="text-14px ml-20px">
        订单数量：{{ Info.total }},总金额：{{ Info.total_money }}，上架费:{{
          Info.sj_money
        }}
      </div>
    </div>
    <div><order :data="list" shop="shop"></order></div>
    <div v-if="list.length <= 0">
      <nodata></nodata>
    </div>
    <van-popup
      @close="popClose"
      v-model:show="showCenter"
      round
      class="p-20px"
      style="width: 375px"
    >
      <div v-if="dateShow" class="w-full">
        <van-date-picker
          v-model="currentDate"
          title="选择日期"
          @cancel="cancel"
          @confirm="confirm"
        />
      </div>
      <div v-show="shopShow">
        <van-picker
          title="店铺"
          :columns="columns"
          :columns-field-names="columnsType"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </div>
    </van-popup>
  </div>

  <pagination
    @back="back"
    @next="next"
    :current_page="Info.current_page"
    :last_page="Info.last_page"
    :per_page="Info.per_page"
    :total="Info.total"
  ></pagination>
</template>
<script setup>
import pagination from "@/components/pagination.vue";
import { shopGetShop, shopGetOrderTotal } from "@/util/api";
import order from "@/components/order.vue";
import nodata from "@/components/nodata.vue";
const showCenter = ref(false);
const dateShow = ref(false);
const shopShow = ref(false);
const columns = ref([]);
const columnsType = ref({ text: "shop_name", value: "shop_name" });
const currentDate = ref(["2023", "01"]);
const date = ref("请选择日期");
const shopingName = ref("请选择店铺");
const Info = reactive({
  current_page: 0,
  last_page: 0,
  per_page: 0,
  sj_money: 0,
  total: 0,
  total_money: 0,
  total_number: 0,
});
const list = ref([]);
const param = reactive({
  page: 1,
  shop_id: "",
  date: "",
});
const url = ref("");
const back = () => {
  param.page--;
  getList();
};
const next = () => {
  param.page++;
  getList();
};

const getData = async () => {
  const res = await shopGetShop();
  columns.value = res.msg;
  let y = new Date().getFullYear();
  let m = new Date().getMonth() + 1;
  let d = new Date().getDate();
  date.value = y + "-" + m + "-" + d;
  param.date = date.value;
  currentDate.value[0] = y;
  currentDate.value[1] = m;
  currentDate.value[2] = d;
  console.log(res.msg);
  shopingName.value = res.msg[0].shop_name;
  param.shop_id = res.msg[0].id;
  getList();
};
getData();

const getList = async () => {
  const res = await shopGetOrderTotal(param);
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  list.value = res.msg.data;
};

const handleDate = () => {
  dateShow.value = true;
  showCenter.value = true;
};
//时间选择器取消
const cancel = () => {
  dateShow.value = false;
  showCenter.value = false;
};
//时间选择器确认
const confirm = (v) => {
  dateShow.value = false;
  showCenter.value = false;
  // console.log(v.selectedValues);
  date.value =
    v.selectedValues[0] + "-" + v.selectedValues[1] + "-" + v.selectedValues[2];
  param.date = date.value;
  param.page = 1;
  getList();
};
const handleShop = () => {
  shopShow.value = true;
  showCenter.value = true;
};
//店铺选择器取消
const onCancel = () => {
  shopShow.value = false;
  showCenter.value = false;
};
//店铺选择器确认
const onConfirm = (v) => {
  shopShow.value = false;
  showCenter.value = false;

  param.shop_id = v.selectedOptions[0].id;
  shopingName.value = v.selectedValues[0];
  param.page = 1;
  getList();
};
const handleClick = () => {
  let query = {
    shop_id: param.shop_id,
    date: param.date,
  };
  url.value = "/api/dao/shopTotalDao/query/" + JSON.stringify(query);
  // window.open(url.value);
};
const popClose = () => {
  showCenter.value = false;
  dateShow.value = false;
  shopShow.value = false;
};
</script>
